<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>加减混合运算测试</title>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<script src="js/layui/layui.js"></script>
		<script>
			var defaultOpts = {
				num_min: 20,
				num_max: 30,
				questionCount: 45,
				max_retry_count: 10000
			};
			layui.use(['form', 'layer', 'table', 'slider'], function() {
				var $ = layui.$,
					form = layui.form,
					layer = layui.layer,
					table = layui.table,
					slider = layui.slider;
				
				slider.render({
				    elem: '#slideTest1',
					value: 20
				  });

				//监听提交
				form.on('submit(demo1)', function(data){
					console.log(JSON.stringify(data.field));
					var num_min = data.field.num_min;
					var num_max = data.field.num_max;
					var questionCount = data.field.questionCount;
					var result = getMathQuestions(num_min, num_max, questionCount);
					
					if(result.length < questionCount) {
						layer.alert("找来找去，就找到" + result.length + "道题，凑合做吧", function() {
							showQuestions(result);
						});
					} else {
						showQuestions(result);
					}
					return false;
				});
				
				$('#num_min').val(defaultOpts.num_min);
				$('#min_text').html('从' + defaultOpts.num_min);
				$('#num_max').val(defaultOpts.num_max);
				$('#max_text').html('到' + defaultOpts.num_max);
				$('#questionCount').val(defaultOpts.questionCount);
				$('#questionCount_text').html('题目数量' + defaultOpts.questionCount);
				
				function showQuestions(result) {
					geneHtml(result);
					$('#question_opts').hide();
				}
				
				function geneHtml(questions) {
					$('#questionTable').html('');
					var count = questions.length;
					var column = Math.ceil(count/20)
					console.log(column);
					var row = Math.ceil(count/column);
					var html = '<tbody>';
					$.each(questions, function(idx, obj) {
						if(idx%column == 0) {
							console.log(idx%column);
							html += '<tr>';
						}
						html += '<td style="line-height:2.1em;font-size:' + (27/row) + 'em;border: 0px;margin-top: 5px;background-color: white;">' + obj + '</td>';
						if(idx%column == column-1) {
							console.log(idx%column);
							html += '</tr>';
						}
					});
					if(!html.endsWith('</tr>')) {
						html += '</tr>';
					}
					html += '</tbody>';
					$('#questionTable').append($(html))
				}
				
				function getMathQuestions(min, max, count) {
					min = parseInt(min);
					max = parseInt(max);
					count = parseInt(count);
					
					$('#question_text').html(min + ' - ' + max + '加减法测试' + count + '题');
					
					var methodAmount, method1, method2, a, b, c;
					var result = new Array();
					
					var lastLength, lastLengthCount;
					while(result.length < count) {
						var currLength = result.length;
						if(currLength == lastLength) {
							lastLengthCount ++;
						} else {
							lastLength = currLength;
							lastLengthCount = 1;
						}
						if(lastLengthCount > defaultOpts.max_retry_count) {
							break;
						}
						var methodAmount = Math.random() > 0.5 ? 1 : 2;
						var method1 = Math.random() > 0.5 ? 1 : 2; // + 1, - 2, x 3, / 4
						var method2 = Math.random() > 0.5 ? 1 : 2; // + 1, - 2, x 3, / 4
								
						var a = parseInt(Math.random()*(max + 1));
						var b = parseInt(Math.random()*(max + 1));
						var c = parseInt(Math.random()*(max + 1));
						
						var q;
						
						if (methodAmount == 1) {
							if (method1 == 1 && (a + b) <= max && (a + b) > min) {
								q = a + "+" + b + "=";
							}
							if (method1 == 2 && (a - b) >= 0 && a <= max && a > min) {
								q = a + "-" + b + "=";
							}
							if (method1 == 2 && (b - a) >= 0 && b <= max && b > min) {
								q = b + "-" + a + "=";
							}
						} else if (methodAmount == 2) {
							if (method1 == 1 && method2 == 1 && (a + b + c) <= max && (a + b + c) > min) {
								q = a + "+" + b + "+" + c + "=";
							}
							if (method1 == 1 && method2 == 2 && (a + b) <= max && (a + b) > min && (a + b - c) >= 0) {
								q = a + "+" + b + "-" + c + "=";
							}
							if (method1 == 2 && method2 == 2 && (a - b - c) >= 0 && a <= max && a > min) {
								q = a + "-" + b + "-" + c + "=";
							}
							if (method1 == 2 && method2 == 1 && a <= max && (a > b) && (a - b + c) <= max && (a - b + c) > min) {
								q = a + "-" + b + "+" + c + "=";
							}
						}
						if (q && result.indexOf(q) == -1) {
							result.push(q);
						}
					}
					return result;
				};
			});
				function drag(that, id, text) {
					document.getElementById(id).innerHTML = text + that.value;
				}
		</script>
	</head>
	<body>
				<fieldset id="question_opts" class="layui-elem-field">
					<legend>加减法计算题生成器</legend>
					<div class="layui-field-box">
						<form class="layui-form" action="">
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend id="min_text">从</legend>
							</fieldset>
							<div class="layui-form-item">
									<input id="num_min" name="num_min" type="range" min="0" max="100" step="1" style="width: 90%; height: 50px; padding-left: 10%;" oninput="javascript:drag(this, 'min_text', '从');">
							</div>
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend id="max_text">到</legend>
							</fieldset>
							<div class="layui-form-item">
									<input id="num_max" name="num_max" type="range" min="0" max="100" step="1" style="width: 90%; height: 50px; padding-left: 10%;" oninput="javascript:drag(this, 'max_text', '到');">
							</div>
							<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
								<legend id="questionCount_text">题目数量</legend>
							</fieldset>
							<div class="layui-form-item">
								<input id="questionCount" name="questionCount" type="range" min="10" max="100" step="1" style="width: 90%; height: 50px; padding-left: 10%;" oninput="javascript:drag(this, 'questionCount_text', '题目数量');">
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
								</div>
							</div>
						</form>
					</div>
				</fieldset>
				<div id="optForm">
					<fieldset class="layui-elem-field layui-field-title">
						<legend id="question_text" onclick="window.location.reload();"></legend>
					</fieldset>
					<table id="questionTable" class="alayui-table" style="width: 100%;">
					</table>
				</div>
	</body>
</html>
